<template>
	<view class="my-userinfo">

		<view class="top-item">
			<view class="top-item-nr">
				<view class="top-item-nr-tb">
					<image :src="userinfo.avatarUrl" mode=""></image>
				</view>
				<view class="top-item-nr-xx">
					<p class="mz">{{userinfo.nickName}}</p>
					<p class="phone">183****2526</p>
				</view>
			</view>
			<view class="top-item-tp" @click="tz">
				<uni-icons type="gear" size="30" color="white"></uni-icons>
			</view>
		</view>
		<view class="center-item">
			<view class="center-item-ct bk" @click="cthz">
				<view class="center-item-cq">
					<view class="center-item-cq-img">
						<image src="../../static/zhuye/cuoti.png"></image>
					</view>
					<view class="center-item-cq-font">
						<p>错题汇总</p>
					</view>
				</view>
				<view class="center-item-jt">
					<p>></p>
				</view>
			</view>
			<view class="center-item-ct bk" @click="zjlx">
				<view class="center-item-cq">
					<view class="center-item-cq-img">
						<image src="../../static/zhuye/zjlx.png"></image>
					</view>
					<view class="center-item-cq-font">
						<p>章节练习</p>
					</view>
				</view>
				<view class="center-item-jt">
					<p>></p>
				</view>
			</view>
			<view class="center-item-ct bk" @click="kscj">
				<view class="center-item-cq">
					<view class="center-item-cq-img">
						<image src="../../static/zhuye/kaoshi.png"></image>
					</view>
					<view class="center-item-cq-font">
						<p>考试成绩</p>
					</view>
				</view>
				<view class="center-item-jt">
					<p>></p>
				</view>
			</view>
			<view class="center-item-ct" @click="wdsc">
				<view class="center-item-cq">
					<view class="center-item-cq-img">
						<image src="../../static/zhuye/sc.png"></image>
					</view>
					<view class="center-item-cq-font">
						<p>我的收藏</p>
					</view>
				</view>
				<view class="center-item-jt">
					<p>></p>
				</view>
			</view>
			<view class="center-item-ct" @click="logout">
				<view class="center-item-cq">
					<view class="center-item-cq-img">
						<image src="../../static/zhuye/gj.png"></image>
					</view>
					<view class="center-item-cq-font">
						<p>退出登录</p>
					</view>
				</view>
				<view class="center-item-jt">
					<p>></p>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		name: "my-userinfo",
		data() {
			return {

			};
		},
		computed: {
			...mapState('users', ['userinfo'])
		},
		methods:{
			...mapMutations('users',['updateUserInfo','updateTokenInfo']),
			async logout(){
				const [err,succ]=await uni.showModal({
					title:'提示',
					content:'确认退出登录吗？'
				}).catch(err=>err)
				if(succ&&succ.confirm){
					this.updateUserInfo({})
					this.updateTokenInfo('')
				}
			},
			tz(){
				uni.navigateTo({
					url:"/subpkg/shezhi/shezhi"
				})
			},
			cthz(){
				uni.navigateTo({
					url:"/subpkg/cthz/cthz"
				})
			},
			wdsc(){
				uni.navigateTo({
					url:"/subpkg/wdsc/wdsc"
				})
			},
			zjlx(){
				uni.navigateTo({
					url:"/subpkg/zjlx/zjlx"
				})
			},
			kscj(){
				uni.navigateTo({
					url:"/subpkg/kscj/kscj"
				})
			}
		}
	}
</script>

<style lang="scss">
	image {
		height: 20px;
		width: 20px;
	}

	body {
		// height: 100%;
		background-color: rgb(247, 246, 249);

		.my-userinfo {
			background-color: dodgerblue;

			.top-item {
				height: 120px;
				background-color: dodgerblue;
				display: flex;
				justify-content: space-between;

				.top-item-nr {
					display: flex;

					.top-item-nr-tb {
						margin-top: 30px;
						margin-left: 20px;

						image {
							border-radius: 100%;
							width: 60px;
							height: 60px;
						}

					}

					.top-item-nr-xx {
						color: white;
						margin-left: 15px;
						margin-top: 30px;

						.mz {
							font-size: 20px;
						}

						.phone {
							font-size: 16px;
							margin-top: 10px;
						}
					}
				}

				.top-item-tp {
					margin-top: 35px;
					margin-right: 10px;


					.Img {
						height: 25px;
						width: 25px;
					}
				}
			}

			.center-item {
				background-color: white;
				border-top-left-radius: 12px;
				border-top-right-radius: 12px;

				.bk {
					border-bottom: 1px solid rgb(247, 246, 249);
				}

				.center-item-ct {
					height: 60px;
					display: flex;
					justify-content: space-between;

					.center-item-cq {
						display: flex;

						.center-item-cq-img {
							margin-top: 20px;
							margin-left: 10px;
						}

						.center-item-cq-font {
							margin-left: 15px;
							margin-top: 18px;
							font-weight: 500;
							color: gray;
						}
					}

					.center-item-jt {
						color: gray;
						font-size: 22px;
						margin-top: 16px;
						margin-right: 15px;
					}
				}
			}

		}
	}
</style>